<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue2.0初体验</title>
    <!-- 加载vue必须的js库 -->
    <script src="./js/vue/vue2.6.14.js"></script>
    
    <!-- 这里写vue组件样式代码 -->
    <style>
        *{
            margin: 0;
            padding: 0;
        }
        #app{
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }
        .button{
            color: red;
            transition: all .3s;
        }
    </style>
</head>
<body>
    <!-- APP入口标签 -->
    <div id="app">
        <my-button/>
    </div>

    <!-- 在这里写你的js代码-->
    <script>

        // 新增一个vue组件（组件名称必须大写开头）
        const MyButton = {

            // 定义vue组件变量
            data:()=>({
                liked: false,
                heights: 30
            }),

            // 使用watch监听同步更改按钮的高度
            watch:{
                liked(v){
                    v?this.heights = 60:this.heights = 30
                }
            },
            
            // 返回的jsx语法模板 tips：其实这里可以写的和react一样，只是在html中vue无法使用jsx语法模板，这是vue自带的另类jsx语法模板
            render: function (h) {
                return h('button', {
                    class: 'button',
                    on: {
                        click: ()=>{
                            this.liked = !this.liked
                        }
                    },
                    style:{
                        height: this.heights + 'px'
                    }
                },[String(this.liked)])
            }
        }

        // vue顶层组件，app入口
        new Vue({
            components: {
			    'my-button':MyButton
		    }
        }).$mount('#app')
    </script>
</body>
</html>